<template>
  <div class="mod-config">
    <el-button-group style="margin-bottom: 10px;">
      <el-button type="primary" icon="el-icon-search" @click="searchHandle">查询</el-button>
      <el-button type="primary" icon="el-icon-delete" @click="searchReset">清空</el-button>
    </el-button-group>
    <el-form inline label-width="100px" @keyup.enter.native="searchHandle">
      <el-form-item label="单据编号">
        <el-input v-model="dataForm.billId"></el-input>
      </el-form-item>
      <el-form-item label="运单单号">
        <el-input v-model="dataForm.transportBillId"></el-input>
      </el-form-item>
      <el-form-item label="收入仓位">
        <el-select v-model="dataForm.inStockId">
          <el-option v-for="item in stockOptions" :value="item.id" :label="item.name" :key="item.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="审核状态">
        <el-select v-model="dataForm.inveStatus">
          <el-option value="0" label="未审核"></el-option>
          <el-option value="1" label="已审核"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="审核日期">
        <el-row>
          <el-col :span="11">
            <el-date-picker v-model="dataForm.auditTimeStart" style="width: 100%;" value-format="yyyy-MM-dd"></el-date-picker>
          </el-col>
          <el-col class="line" :span="2" style="text-align: center;">-</el-col>
          <el-col :span="11">
            <el-date-picker v-model="dataForm.auditTimeEnd" style="width: 100%;" value-format="yyyy-MM-dd"></el-date-picker>
          </el-col>
        </el-row>
      </el-form-item>
      <el-form-item label="审核人">
        <el-input v-model="dataForm.auditUserName"></el-input>
      </el-form-item>
      <el-form-item label="结算人">
        <el-input v-model="dataForm.financeUserName"></el-input>
      </el-form-item>
      <el-form-item label="商品类别">
        <el-select v-model="dataForm.ctgId">
          <el-option v-for="item in ctgOptions" :value="item.id" :label="item.name" :key="item.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="制单日期">
        <el-row>
          <el-col :span="11">
            <el-date-picker v-model="dataForm.createTimeStart" style="width: 100%;" value-format="yyyy-MM-dd"></el-date-picker>
          </el-col>
          <el-col class="line" :span="2" style="text-align: center;">-</el-col>
          <el-col :span="11">
            <el-date-picker v-model="dataForm.createTimeEnd" style="width: 100%;" value-format="yyyy-MM-dd"></el-date-picker>
          </el-col>
        </el-row>
      </el-form-item>
      <el-form-item label="商品名称">
        <el-input v-model="dataForm.viewGoodsName"></el-input>
      </el-form-item>
      <el-form-item label="商品代码">
        <el-input v-model="dataForm.goodsCode"></el-input>
      </el-form-item>
      <el-form-item label="制造商">
        <el-input v-model="dataForm.supplyName">
          <el-button slot="append" @click="openSupplyDialog">选择</el-button>
        </el-input>
      </el-form-item>
    </el-form>
    <div class="avue-crud">
      <el-table :data="dataList" border v-loading="dataListLoading" :max-height="tableHeight">
        <el-table-column prop="billId" label="单号" width="170"></el-table-column>
        <el-table-column prop="ctgName" label="商品类别" width="80"></el-table-column>
        <el-table-column prop="transportBillId" label="运单单号" width="150"></el-table-column>
        <el-table-column prop="supplyName" label="制造商"></el-table-column>
        
        <el-table-column prop="inStockName" label="收入仓位" width="150"></el-table-column>
        <el-table-column prop="createTime" label="单据日期" width="150"></el-table-column>
        <el-table-column prop="financeUserName" label="结算人" width="80"></el-table-column>
        <el-table-column prop="financeTime" label="结算时间" width="150"></el-table-column>
        <el-table-column label="操作" width="140" fixed="right">
          <template slot-scope="scope">
            <el-button type="text" icon="el-icon-collection" @click="checkPurchaseDetail(scope.row.id)">详情</el-button>
            <el-button v-if="permissions.eims_inventoryapply_edit" type="text" icon="el-icon-edit" @click="addOrUpdateHandle(scope.row.id)"
              :disabled="scope.row.financeStatus == '1'">修改</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <div class="avue-crud__pagination">
      <el-pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" :current-page="pageIndex"
        :page-sizes="[10, 20, 50, 100, 200]" :page-size="pageSize" :total="totalPage" background layout="total, sizes, prev, pager, next">
      </el-pagination>
    </div>
    <!-- 弹窗, 新增 / 修改 -->
    <table-form v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></table-form>
    <detail-dialog v-if="detailDialogVisible" ref="detailDialog" @refreshDataList="getDataList"></detail-dialog>
    <search-supply v-if="supplyVisible" ref="supplyDialog" @refreshData="getSupplyData"></search-supply>
  </div>
</template>

<script>
  import { mapGetters } from 'vuex'
  import { filterParams } from '@/util/tools'
  import { receiveGoodsFetchList } from '@/api/eims/purchase/receive-goods'

  import { getCtgList } from '@/api/eims/ctg'
  import { getStockList } from '@/api/eims/stock'

  import TableForm from './form'
  import DetailDialog from './detail'
  import SearchSupply from '@/components/business/SearchSupply'
  
  export default {
    data() {
      return {
        dataForm: {},
        dataList: [],
        pageIndex: 1,
        pageSize: 200,
        totalPage: 0,
        ctgOptions: [],
        stockOptions: [],
        orderOptionsStart: {},
        orderOptionsEnd: {},
        checkOptionsStart: {},
        checkOptionsEnd: {},
        dataListLoading: false,
        addOrUpdateVisible: false,
        detailDialogVisible: false,
        supplyVisible: false
      }
    },
    components: {
      TableForm,
      DetailDialog,
      SearchSupply
    },
    created() {
      this.getDataList()
      this.getGoodsCtgList()
      this.getStockList()
    },
    computed: {
      ...mapGetters(['permissions']),
      tableHeight: function(){
        return window.innerHeight - 260
      }
    },
    methods: {
      //  查询数据
      searchHandle() {
        this.pageIndex = 1
        this.getDataList()
      },
      //  清空搜索表单
      searchReset() {
        for (let key in this.dataForm) {
          this.dataForm[key] = ''
        }
      },
      // 获取数据列表
      getDataList() {
        this.dataListLoading = true
        let params1 = {
          current: this.pageIndex,
          size: this.pageSize,
          inveStatus: 1
        }
        let params2 = filterParams(this.dataForm)
        receiveGoodsFetchList(Object.assign(params1, params2)).then(response => {
          if(response.data.code == '0'){
            this.dataList = response.data.data.records
            this.totalPage = response.data.data.total
          }else{
            this.$message.error(response.data.msg)
          }
          this.dataListLoading = false
        })
      },
      // 每页数
      sizeChangeHandle(val) {
        this.pageSize = val
        this.pageIndex = 1
        this.getDataList()
      },
      // 当前页
      currentChangeHandle(val) {
        this.pageIndex = val
        this.getDataList()
      },
      // 查看详情
      checkPurchaseDetail(id) {
        this.detailDialogVisible = true
        this.$nextTick(() => {
          this.$refs.detailDialog.init(id)
        })
      },
      // 新增 / 修改
      addOrUpdateHandle(id) {
        this.addOrUpdateVisible = true
        this.$nextTick(() => {
          this.$refs.addOrUpdate.init(id)
        })
      },
      orderChangeStart() {
        this.orderOptionsStart = Object.assign({}, this.orderOptionsStart, {
          disabledDate: (time) => {
            if (this.dataForm.createTimeEnd) {
              return time.getTime() > this.dataForm.createTimeEnd
            } else {
              return false
            }

          }
        })
      },
      //   获取商品类别列表
      getGoodsCtgList() {
        getCtgList().then(response => {
          if(response.data.code == '0'){
            this.ctgOptions = response.data.data
          }else{
            this.$message.error(response.data.msg)
          }
        })
      },
      //   获取仓位列表
      getStockList() {
        getStockList().then(response => {
          if(response.data.code == '0'){
            this.stockOptions = response.data.data
          }else{
            this.$message.error(response.data.msg)
          }
        })
      },
      //   打开制造商选择弹窗
      openSupplyDialog() {
        this.supplyVisible = true
        this.$nextTick(() => {
          this.$refs.supplyDialog.init({
            ctgId: ''
          })
        })
      },
      //   获取制造商信息
      getSupplyData(data) {
        this.$set(this.dataForm, 'supplyName', data.name)
        this.$set(this.dataForm, 'supplyId', data.id)
      },
      orderChangeEnd() {
        this.orderOptionsEnd = Object.assign({}, this.orderOptionsEnd, {
          disabledDate: (time) => {
            if (this.dataForm.createTimeStart) {
              return time.getTime() < this.dataForm.createTimeStart
            } else {
              return false
            }
          }
        })
      },
      checkChangeStart() {
        this.checkOptionsStart = Object.assign({}, this.checkOptionsStart, {
          disabledDate: (time) => {
            if (this.dataForm.auditTimeEnd) {
              return time.getTime() > this.dataForm.auditTimeEnd
            } else {
              return false
            }
          }
        })
      },
      checkChangeEnd() {
        this.checkOptionsEnd = Object.assign({}, this.checkOptionsEnd, {
          disabledDate: (time) => {
            if (this.dataForm.auditTimeStart) {
              return time.getTime() < this.dataForm.auditTimeStart
            } else {
              return false
            }
          }
        })
      }
    }
  }
</script>
